<template>
  <div class="page">
    <el-button type="primary" size="mini" class="btn" @click="addCollege"
      >新增学院</el-button
    >
    <el-button type="primary" size="mini" class="btn" @click="addClass"
      >新增班级</el-button
    >
    <div class="custom-tree-container">
      <div class="block">
        <el-tree :data="list" node-key="id" :props="defaultProps">
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
            <span class="button">
              <el-button
                type="primary"
                size="mini"
                @click="() => append(data)"
                class="addClass"
              >
                编辑
              </el-button>
              <el-button
                type="danger"
                size="mini"
                @click="() => remove(node, data)"
              >
                删除
              </el-button>
            </span>
          </span>
        </el-tree>
      </div>
    </div>
    <class-edit-dialog
      ref="classEditDialog"
      :title="title"
      @changedata="changedata"
      :formLabelAlign="formLabelAlign"
    />
  </div>
</template>

<script>
import axios from "axios";
import { mapState } from "vuex";
import classEditDialog from "../components/classEditDialog";
// let id = 10000;
export default {
  components: {
    classEditDialog,
  },
  data() {
    return {
      list: [],
      data: [
        {
          id: 1,
          className: "一级 1",
          children: [
            {
              id: 4,
              className: "二级 1-1",
              children: [
                {
                  id: 9,
                  className: "三级 1-1-1",
                },
                {
                  id: 10,
                  className: "三级 1-1-2",
                },
              ],
            },
          ],
        },
        {
          id: 2,
          className: "一级 2",
          children: [
            {
              id: 5,
              className: "二级 2-1",
            },
            {
              id: 6,
              className: "二级 2-2",
            },
          ],
        },
        {
          id: 3,
          className: "一级 3",
          children: [
            {
              id: 7,
              className: "二级 3-1",
            },
            {
              id: 8,
              className: "二级 3-2",
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "className",
      },
      title: "新增学院",
      formLabelAlign: {
        collegeName: "",
        region: "",
        className: "",
        id: "",
      },
    };
  },
  computed: mapState({
    type(state) {
      return state.app.type;
    },
  }),
  created() {
    this.edit();
  },
  methods: {
    edit() {
      axios.post("/api/user/select_college", {}).then((res) => {
        console.log(res.data);
        // this.list = res.data;
        for (let i = 0; i < res.data.length; i++) {
          this.list = res.data;
          let id = res.data[i].id;
          axios
            .post("/api/user/select_class", {
              id,
            })
            .then((res) => {
              this.list[i].children = res.data;
              for (let j = 0; j < this.list[i].children.length; j++) {
                this.list[i].children[j].children = [];
              }
            });
        }
        console.log(this.list);
        // this.data = this.list;
      });
    },
    addCollege() {
      this.title = "新增学院";
      this.formLabelAlign = {};
      this.$refs.classEditDialog.openDialog();
    },
    addClass() {
      this.title = "新增班级";
      this.formLabelAlign = {
        collegeName: "",
        region: "",
        className: "",
        id: "",
      };
      this.$refs.classEditDialog.openDialog();
      this.$refs.classEditDialog.selectCollege();
    },
    changedata() {
      this.edit();
    },
    append(data) {
      console.log(data);
      if (data.fatherId === 0) {
        this.title = "编辑学院";
        this.formLabelAlign.region = data.fatherId;
        this.formLabelAlign.collegeName = data.className;
        this.formLabelAlign.id = data.id;
      } else {
        this.title = "编辑班级";
        this.$refs.classEditDialog.selectCollege();
        this.formLabelAlign.region = data.fatherId;
        this.formLabelAlign.className = data.className;
        this.formLabelAlign.id = data.id;
        console.log(this.formLabelAlign);
      }
      this.$refs.classEditDialog.openDialog();
      // const newChild = { id: id++, className: "", children: [] };
      // if (!data.children) {
      //   this.$set(data, "children", []);
      // }
      // data.children.push(newChild);
    },
    remove(node, data) {
      console.log(node, data);
      let clickId = data.id;
      if (data.fatherId === 0) {
        this.$confirm("此操作将永久删除该学院, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            axios
              .post("/api/user/delete_college", {
                clickId,
              })
              .then(() => {
                axios
                  .post("/api/user/delete_collegeClass", {
                    clickId,
                  })
                  .then(() => {
                    this.edit();
                    this.$message({
                      type: "success",
                      message: "删除成功",
                    });
                  });
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      } else {
        this.$confirm("此操作将删除该班级, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            axios
              .post("/api/user/delete_class", {
                clickId,
              })
              .then(() => {
                this.edit();
                this.$message({
                  type: "success",
                  message: "删除成功",
                });
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.page {
  width: calc(100% - 246px);
  height: 100%;
  margin-left: 6px;
  background: url(~@/assets/images/矩形1拷贝3.png) no-repeat;
  background-size: 110% 100%;
  background-position: 80% 110%;
  text-align: left;
  .btn {
    margin: 20px;
  }
  .btn:nth-of-type(1) {
    margin-left: 60px;
  }
  /deep/ .el-tree {
    width: 90%;
    height: 74vh;
    margin: auto;
    overflow: auto;
    background: rgba(255, 255, 255, 0.5);
    // .el-tree-node.is-expanded > .el-tree-node__children .addClass {
    //   // visibility: hidden;
    //   display: none;
    // }
    .el-tree-node {
      padding: 4px;
      font-size: 16px;
      .button {
        position: absolute;
        right: 10%;
      }
    }
    .el-tree-node__content {
      height: 42px;
      // &:hover {
      //   background: none;
      // }
    }
    .el-tree-node_content:hover .el-tree-node_expand-icon {
      height: 100%;
    }
  }
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  ::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 5px;
    -webkit-box-shadow: inset005pxrgba(0, 0, 0, 0.2);
    background: #2a9dff;
  }

  ::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    -webkit-box-shadow: inset005pxrgba(0, 0, 0, 0.2);
    border-radius: 0;
    background: rgba(29, 25, 83, 0.5);
  }
}
</style>
